import React, { FC, useEffect, useRef, useState } from 'react'
import OrderGoodsList from '@/components/goods/orderDetailList'
import OrderInfo from '@/components/orderList/orderInfo'
import { EmptyAddress } from '@/components/address/index'
import { StdAddress } from '@/components/orderList/orderAddress'
import Loading from '@/components/home/loading/saleLoading'
import Header from '@/components/home/header'
import OperateInfo from '@/components/orderList/operateInfo'
import Payment from '@/components/payment/index'
import { getOrderDetail } from '@/api/orderList'
import { OrderConfirm } from '@/types/orderConfirm'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { XBusinesslineId } from '@/constants'
import { StuAdd } from '@/types/address/userAdd'
import { OrderDetailData } from '@/types/orderList/orderDetail'
import OrderDetailStatus from '@/components/orderList/orderDetailStatus'
import { EOrderParamType } from '@/types/orderList'
import { EOperateStatus, EOrderStatus } from '@/types/enum'
import { useUpdateEffect } from 'ahooks'
/**
 * 确认支付页面
 */
const welfare: FC<{}> = () => {
  const [loading, setLoading] = useState(false)
  const [search] = useSearchParams()
  const orderNum = search.get('orderNum')
  const navigate = useNavigate()

  const [currendStdAdd, setCurrendStdAdd] = useState<Partial<StuAdd>>({})
  const [orderData, setOrderData] = useState<OrderDetailData | null>(null)
  useEffect(() => {
    //param to do
    if (orderNum) {
      getOrderDetail({ orderNum: orderNum, 'X-Businessline-Id': XBusinesslineId }).then((res) => {
        setCurrendStdAdd(res.data.addressInfo)
        setOrderData(res.data)
      })
    }
  }, [])
  //initCurrendStdAdd

  /** 订单长度问题*/
  const ref = useRef<HTMLDivElement>(null)
  const ref2 = useRef<HTMLDivElement>(null)
  /**重新计算高度 */
  useUpdateEffect(() => {
    if (ref.current && ref2.current) {
      ref2.current.style.height = ref.current.offsetTop + 100 + 'px'
    }
  }, [ref.current])

  //   operateHref: "https://bcc.xiwang.com/api/trade/Order/show?orderNum=230306173419100618120603",
  // operateStatus:2,
  // operateText: "立即支付",
  return (
    <div className="w-full h-auto overflow-y-auto bg-bray-F7F7F8 " ref={ref2}>
      <Header
        cb={() => {
          navigate(-1)
        }}
        headerText={'订单详情'}
      ></Header>
      {orderData ? (
        <OrderDetailStatus type={orderData?.orderInfo.payStatus}></OrderDetailStatus>
      ) : null}
      {loading ? <Loading noBorder={true} modal={true}></Loading> : null}
      {currendStdAdd ? (
        <StdAddress currendStdAdd={currendStdAdd}></StdAddress>
      ) : (
        <EmptyAddress></EmptyAddress>
      )}
      {orderData ? (
        <>
          <OrderGoodsList orderDetailData={orderData}></OrderGoodsList>{' '}
          <OrderInfo
            priceInfo={orderData.priceInfo || {}}
            orderInfo={orderData.orderInfo}
          ></OrderInfo>{' '}
        </>
      ) : null}
      {orderData &&
      orderData.operateInfo &&
      orderData.operateInfo.operateStatus === EOperateStatus.payment ? (
        <OperateInfo
          operateInfo={orderData.operateInfo}
          orderInfo={orderData.orderInfo}
        ></OperateInfo>
      ) : null}

      <div ref={ref}></div>
    </div>
  )
}

export default welfare
